<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除浮动 */
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: 1903px;
            position: relative;
        }

        /* 顶部样式 */
        .container .header {
            width: 100%;
            height: 1000px;
            background-image: url(./images/1111.jpg);
        }

        /* 顶部导航样式 */
        .header .headerTop {
            width: 100%;
            height: 100px;

            position: relative;
            display: flex;
        }

        /* 顶部标志样式 */
        .headerTop .LeftIcon {
            width: 100px;
            height: 100%;
            margin-left: 200px;
            flex: 2 0 auto;
        }

        .headerTop .LeftIcon img {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin-left: 40%;

        }

        /* 顶部导航栏 */
        .headerTop .headerNav {
            flex: 6 0 auto;
            height: 100%;

        }

        .headerNav ul {
            display: flex;
            width: 100%;
            height: 100%;
            text-align: center;

        }

        /* 一级导航栏 */
        .headerNav ul li {
            margin-left: 5%;
            height: 100%;
            width: 15%;
            margin-top: 45px;
            color: white;
            font-size: 20px;

        }

        /* 一级导航栏里面的图片样式 */
        .headerNav img {
            display: inline-block;

        }

        /* 鼠标悬停一级标题，二级标题弹出 */
        .headerNav ul li:nth-child(1):hover .SecondNav1 {
            display: block;
        }

        .headerNav ul li:nth-child(2):hover .SecondNav2 {
            display: block;
        }

        .headerNav ul li:nth-child(3):hover .SecondNav3 {
            display: block;
        }

        /* 二级导航栏-男装 */
        .headerNav .SecondNav1 {
            width: 934px;
            height: 275px;
            position: absolute;
            top: 100px;
            left: 500px;
            background-color: white;
            display: none;
        }

        /*  男装左侧-分类表*/
        .SecondNav1 .Nav1left {
            width: 421px;
            height: 72px;
            margin-top: 28px;
            margin-left: 30px;
            float: left;

        }

        .SecondNav1 .Nav1left ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .SecondNav1 .Nav1left ul li {
            width: 73.86px;
            height: 36px;
            color: black;
            margin-left: 0;
            margin-top: 0;
        }

        .SecondNav1 .Nav1left ul li a {
            font-size: 13px;
        }

        .SecondNav1 .Nav1left ul li:hover a {
            color: darkturquoise;
            text-decoration: underline;
        }

        /* 男装右侧-图片 */
        .SecondNav1 .Nav1right {
            float: right;
            margin-top: 28px;
            margin-right: 30px;
            width: 425px;
            height: 225px;
        }

        .SecondNav1 .Nav1right img {
            width: 425px;
            height: 225px;
        }

        /* 二级导航栏-女装 */
        .headerNav .SecondNav2 {
            width: 934px;
            height: 275px;
            position: absolute;
            top: 100px;
            left: 550px;
            background-color: white;
            display: none;
        }

        /* 女装左侧-分类表 */
        .SecondNav2 .Nav2left {
            width: 421px;
            height: 250px;
            margin-top: 28px;
            margin-left: 30px;
            float: left;
        }

        .SecondNav2 .Nav2left ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .SecondNav2 .Nav2left ul li {
            width: 73.86px;
            height: 36px;
            color: black;
            margin-left: 0;
            margin-top: 0;
        }

        .SecondNav2 .Nav2left ul li a {
            font-size: 13px;
        }

        /* 女装右侧-图片 */
        .SecondNav2 .Nav2right {
            float: right;
            margin-top: 28px;
            margin-right: 30px;
            width: 425px;
            height: 225px;
        }

        .SecondNav2 .Nav2right img {
            width: 425px;
            height: 225px;
        }

        .SecondNav2 .Nav2left ul li:hover a {
            color: darkturquoise;
            text-decoration: underline;

        }

        /* 二级导航栏-系列 */
        .headerNav .SecondNav3 {
            width: 900px;
            height: 275px;
            position: absolute;
            top: 100px;
            left: 600px;
            background-color: white;
            display: none;
            /* display: none; */
        }

        .SecondNav3 .Nav3left {
            width: 421px;
            height: 250px;
            margin-top: 28px;
            margin-left: 30px;
            float: left;
        }

        .SecondNav3 .Nav3left ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }

        .SecondNav3 .Nav3left ul li {
            width: 200px;
            height: 36px;
            color: black;
            margin-left: 0;
            margin-top: 0;
        }

        .SecondNav3 .Nav3left ul li a {
            font-size: 13px;
        }

        /* 系列右侧-图片 */
        .SecondNav3 .Nav3right {
            float: right;
            margin-top: 28px;
            margin-right: 10px;
            width: 425px;
            height: 225px;
        }

        .SecondNav3 .Nav3right img {
            width: 425px;
            height: 225px;
        }

        .SecondNav3 .Nav3left ul li:hover a {
            color: darkturquoise;
            text-decoration: underline;

        }

        /* 顶部标签 */

         .headerTop .RightIcon {
            flex: 2 0 auto;
            width: 100px;
            height: 100%;
            /* border: 2px solid brown; */
        } 

        /* 内容块1样式 */
        .container .content1 {
            width: 100%;
            height: 800px;
            background: #b5eff7;
            position: relative;
        }

        .container .content1 .content1-photo {
            width: 900px;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -350px;
            left: 10%;
            background-image: url(./images/photo1.jpg);

        }

        .container .content1 .content1-list {
            position: absolute;
            width: 300px;
            height: 600px;
            top: 50%;
            margin-top: -350px;
            left: 1200px;
        }

        .container .content1 .content1-list ul li {
            margin-top: 90px;
        }

        /* 当鼠标悬停时图片和content1颜色改变 */
        .content1-list ul li:nth-child(1) a span:hover+.content1-photo {
            /* width: 900px;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -350px;
            left: 10%; */
            background-image: url(./images/photo1.jpg);
        }

        .content1-list ul li:nth-child(2) a span:hover .content1-photo {
            width: 900px;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -350px;
            left: 10%;
            background-image: url(./images/photo2.jpg);
        }

        .content1-list ul li:nth-child(3) a span:hover .content1-photo {
            width: 900px;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -350px;
            left: 10%;
            background-image: url(./images/photo3.jpg);
        }

        .content1-list ul li:nth-child(4) a span:hover .content1-photo {
            width: 900px;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -350px;
            left: 10%;
            background-image: url(./images/photo4.jpg);
        }

        .content1-list ul li:nth-child(5) a span:hover .content1-photo {
            width: 900px;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -350px;
            left: 10%;
            background-image: url(./images/photo5.jpg);
        }


        /* 内容块2 样式 */
        .container .content2 {

            width: 1440;
            height: 810px;
            margin: 120px auto;
            background-image: url(./images/轮播1.jpg);
            /* 添加动画 */
            animation: swipe 10s linear infinite;
        }

        /* 内容块2样式添加轮播动画 */
        @keyframes swipe {
            0% {
                width: 1440;
                height: 810px;
                margin: 120px auto;
                background-image: url(./images/轮播1.jpg);
            }

            25% {
                width: 1440;
                height: 810px;
                margin: 120px auto;
                background-image: url(./images/轮播2.jpg);
            }

            50% {
                width: 1440;
                height: 810px;
                margin: 120px auto;
                background-image: url(./images/轮播3.jpg);
            }

            75% {
                width: 1440;
                height: 810px;
                margin: 120px auto;
                background-image: url(./images/轮播4.jpg)
            }

            100% {
                width: 1440;
                height: 810px;
                margin: 120px auto;
                background-image: url(./images/轮播5.jpg);
            }
        }

        /* 内容块3 样式 */
        .container .content3 {
            width: 1440px;
            height: 500px;
            margin: 200px auto;

        }

        .container .content3 .title {
            width: 1440px;
            text-align: center;

        }

        .container .content3 .cloth {
            width: 1440px;
            height: 470px;
            display: flex;
            margin: 30px auto;
            flex-wrap: wrap;

        }

        .container .content3 .cloth a img {
            width: 196px;
            height: 261px;

        }

        .container .content3 .cloth a {
            width: 196px;
            height: 261px;
            margin-top: 60px;
            margin-left: 30px;
            text-align: center;
            color: black;

        }

        /* 底部样式 */
        .footer {
            width: 100%;
            height: 1200px;
            background: #00004b;
            position: relative;
            top: 80px;
        }

        /* 底部品牌标识 */
        .footer .symbol {
            margin: 30px auto;
            width: 200px;

        }

        /* 底部地图位置 */

        .footer .shop {
            margin: 60px auto;
            width: 1600px;
            position: relative;
        }

        /* 底部搜索框按钮 */
        .footer .shop .searchButton {
            position: absolute;
            width: 600px;
            height: 200px;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left: -300px;
            box-sizing: border-box;
        }

        /* 搜索框样式设置 */
        .footer .shop .searchButton input[type="text"] {
            position: absolute;
            top: 50px;
            left: 50%;
            margin-left: -300px;
            width: 600px;
            height: 50px;
            border: 1px solid gray;
            border-radius: 600px 550px 600px 550px;
            outline: none;

        }

        /* 搜索按钮样式设置 */
        .footer .shop .searchButton input[type="button"] {
            position: absolute;
            top: 150px;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 50px;
            border: 1px solid #00004b;
            background: #00004b;
            border-radius: 600px 550px 600px 550px;
            outline: none;
            color: white;
        }

        /* 底部导航栏容器 */
        .footer .footerNav {
            margin: 60px auto;
            width: 1500px;
            border: 2px solid white;
            border-top: none;
            border-left: none;
            border-right: none;
            height: 350px;
            position: relative;
            display: flex;
            flex-wrap: wrap;
        }

        .footer .footerNav>div {
            /* width: 200px; */
            height: 300px;
            margin-left: 60px;
        }

        .footer .footerNav .title {
            color: white;
            font-weight: bold;
            font-size: 20px;
            height: 20px;
            text-align: center;

        }

        .footer .footerNav ul li {
            color: white;
            height: 16px;
            margin-left: 10px;
            font-size: 16px;
        }

        .footer .footerNav ul li:hover {
            text-decoration: underline;
            color: aqua;
        }


        /* 导航拉N男装 */
        .footer .footerNav .Nav1 ul {
            margin-top: 30px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 250px;
            height: 100px;
        }

        /* 底部导航栏女装 */
        .footer .footerNav .Nav2 ul {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            width: 250px;
            height: 200px;
        }

        /* 底部导航栏系列 */
        .footer .footerNav .Nav3 ul li {
            margin-top: 20px;
            margin-left: 30px;
        }

        .footer .footerNav .Nav3 ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            width: 200px;
            height: 200px;
        }

        /* 底部导航栏 品牌 */
        .footer .footerNav .Nav4 ul li {
            margin-top: 30px;
            flex-direction: column;
            width: 200px;
            height: 100px;
            margin-left: 50px;
        }

        /* 底部导航栏 问题 */
        .footer .footerNav .Nav5 ul li {
            margin-top: 30px;
            flex-direction: column;
            width: 200px;
            height: 100px;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="headerTop">
                <div class="LeftIcon">
                    <img src="./images/logo_text.png" alt="">
                </div>
                <div class="headerNav">
                    <ul>
                        <!-- 一级导航栏 -->
                        <li><a href="">男装</a>
                            <!-- 二级导航栏 -->
                            <div class="SecondNav1">
                                <div class="Nav1left">
                                    <ul>
                                        <li><a href="">风衣</a></li>
                                        <li><a href="">夹克</a></li>
                                        <li><a href="">长裤</a></li>
                                        <li><a href="">长袖衬衫</a></li>
                                        <li><a href="">长袖T恤</a></li>
                                        <li><a href="">针织衫</a></li>
                                    </ul>
                                </div>
                                <div class="Nav1right">
                                    <img src="./images/二级导航男装.jpg" alt="">
                                </div>
                            </div>
                        </li>
                        <li><a href="">女装</a>
                            <div class="SecondNav2">
                                <div class="Nav2left">
                                    <ul>
                                        <li><a href="">长袖衬衫</a></li>
                                        <li><a href="">梭织连衣裙</a></li>
                                        <li><a href="">单西</a></li>
                                        <li><a href="">夹克衫</a></li>
                                        <li><a href="">短袖T恤</a></li>
                                        <li><a href="">风衣</a></li>
                                        <li><a href="">短裙</a></li>
                                        <li><a href="">长袖T恤</a></li>
                                        <li><a href="">圆领T恤</a></li>
                                        <li><a href="">长裤</a></li>
                                        <li><a href="">针织衫</a></li>
                                    </ul>
                                </div>
                                <div class="Nav2right">
                                    <img src="./images/二级导航女装.jpg" alt="">
                                </div>
                            </div>
                        </li>
                        <li><a href="">系列</a>
                            <div class="SecondNav3">
                                <div class="Nav3left">
                                    <ul>
                                        <li><a href="">CORNWALL</a></li>
                                        <li><a href="">HRC</a></li>
                                        <li><a href="">PHIZ</a></li>
                                        <li><a href="">A PASSAGE TO INDIA</a></li>
                                        <li><a href=""> TRUE BLUE</a></li>
                                    </ul>
                                </div>
                                <div class="Nav3right">
                                    <img src="./images/二级导航系列.jpg" alt="">
                                </div>
                            </div>
                        </li>
                        <li><a href="">品牌</a>
                            <div class="SecondNav4"></div>
                        </li>
                        <li><a href="">门店</a></li>
                    </ul>
                </div>
                <div class="RightIcon"></div>
            </div>

        </div>
        <div class="content1">
            <div class="content1-photo"></div>
            <div class="content1-list">
                <ul>
                    <li><a href=""><span>CORNWALL</span></a></li>
                    <li><a href=""><span>HRC</span></a></li>
                    <li><a href=""><span>PHIZ</span></a></li>
                    <li><a href=""><span>A PASSAGE TO INDIA</span></a></li>
                    <li><a href=""><span>TRUE BLUE</span></a></li>
                </ul>
            </div>
        </div>
        <div class="content2">

        </div>
        <div class="content3">
            <div class="title">
                <h3>
                    新品推荐
                </h3>
                <p>Hazzys New Arrivals</p>
            </div>
            <div class="cloth">



                <a href=""><img src="./images/cloth1.jpg" alt="">
                    <p>商务单色小格子长衬</p>
                </a>
                <a href=""><img src="./images/cloth2.jpg" alt="">
                    <p>商务单色小格子长衬</p>
                </a>
                <a href=""><img src="./images/cloth3.jpg" alt="">
                    <p>牛津纺长衬</p>
                </a>
                <a href=""><img src="./images/cloth4.jpg" alt="">
                    <p>超大格纹长衬</p>
                </a>
                <a href=""><img src="./images/cloth5.jpg" alt="">
                    <p>青年布长衬</p>
                </a>
                <a href=""><img src="./images/cloth7.jpg" alt="">
                    <p>牛津纺长衬</p>
                </a>
                <a href=""><img src="./images/cloth8.jpg" alt="">
                    <p>
                        青年布长衬
                    </p>
                </a>
                <a href=""><img src="./images/cloth9.jpg" alt="">
                    <p>
                        牛津纺长衬
                    </p>
                </a>
                <a href=""><img src="./images/cloth6.jpg" alt="">
                    <p>牛津纺长衬</p>
                </a>
                <a href=""><img src="./images/cloth10.jpg" alt="">
                    <p>
                        超大格纹长衬
                    </p>
                </a>
                <a href=""><img src="./images/cloth11.jpg" alt="">
                    <p>
                        商务单色小格子长衬
                    </p>
                </a>
                <a href=""><img src="./images/cloth12.jpg" alt="">
                    <p>超大格纹长衬</p>
                </a>
            </div>

        </div>
        <div class="footer">
            <div class="symbol">

                <img src="./images/logo_text2.png" style="width: 200px;" alt="">
            </div>
            <div class="shop">

                <img src="./images/shop.png" alt="">
                <div class="searchButton">
                    <input type="text" placeholder="搜索店铺">
                    <input type="button" value="附近门店搜索" style="cursor:hand">
                </div>
            </div>
            <div class="footerNav">
                <div class="Nav1">
                    <div class="title">男装</div>
                    <ul>
                        <li><a href="">风衣</a></li>
                        <li><a href="">夹克</a></li>
                        <li><a href="">长裤</a></li>
                        <li><a href="">长袖衬衫</a></li>
                        <li><a href="">长袖T恤</a></li>
                        <li><a href="">针织衫</a>
                        </li>
                    </ul>
                </div>
                <div class="Nav2">
                    <div class="title">女装</div>
                    <ul>
                        <li><a href="">长袖衬衫</a></li>
                        <li><a href="">梭织连衣裙</a></li>
                        <li><a href="">单西</a></li>
                        <li><a href="">夹克衫</a></li>
                        <li><a href="">短袖T恤</a></li>
                        <li><a href="">风衣</a></li>
                        <li><a href="">短裙</a></li>
                        <li><a href="">长袖T恤</a></li>
                        <li><a href="">圆领T恤</a></li>
                        <li><a href="">长裤</a></li>
                        <li><a href="">针织衫</a></li>
                    </ul>
                </div>
                <div class="Nav3">
                    <div class="title">
                        系列
                    </div>
                    <ul>
                        <li><a href="">CORNWALL</a></li>
                        <li><a href="">HRC</a></li>
                        <li><a href="">PHIZ</a></li>
                        <li><a href="">A PASSAGE TO INDIA</a></li>
                        <li><a href=""> TRUE BLUE</a></li>
                    </ul>
                </div>
                <div class="Nav4">
                    <div class="title">
                        品牌
                    </div>
                    <ul>
                        <li><a href="">关于品牌</a></li>
                        <li><a href="">明星店长</a></li>
                    </ul>
                </div>
                <div class="Nav5">
                    <div class="title">
                        其他

                    </div>
                    <ul>
                        <li><a href="">明星</a></li>
                        <li><a href="">全国门店查询</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>